<template>
  <z-button type="primary" @click="showDrawer">Open</z-button>
  <z-drawer
    v-model:visible="visible"
    title="Multi-level drawer"
    width="520"
    :closable="false"
    :footer-style="{ textAlign: 'right' }"
    @close="onClose"
  >
    <z-button type="primary" @click="showChildrenDrawer">Two-level drawer</z-button>
    <z-drawer
      v-model:visible="childrenDrawer"
      title="Two-level Drawer"
      width="320"
      :closable="false"
    >
      <z-button type="primary" @click="showChildrenDrawer">This is two-level drawer</z-button>
    </z-drawer>

    <template #footer>
      <z-button style="margin-right: 8px" @click="onClose">Cancel</z-button>
      <z-button type="primary" @click="onClose">Submit</z-button>
    </template>
  </z-drawer>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const visible = ref(false)
    const childrenDrawer = ref(false)

    const showDrawer = () => {
      visible.value = true
    }

    const onClose = () => {
      visible.value = false
    }

    const showChildrenDrawer = () => {
      childrenDrawer.value = true
    }

    return {
      visible,
      childrenDrawer,
      showDrawer,
      onClose,
      showChildrenDrawer
    }
  }

})
</script>
